import React, { useCallback, useRef,useState } from "react";
import { useDispatch } from "react-redux";
import { Modal } from "antd-mobile";
import ChangeValue from './changeValue'
import "antd-mobile/dist/antd-mobile.css";
export default function CartItem({ data }) {
    const itemRef = useRef();
    const idRef = useRef(data.get("_id"));
    const [show, setShow] = useState(false)
    const dispatch = useDispatch();
    // 点击+号添加商品数量
    const addGoods = useCallback(() => {
        dispatch({
            type: "cart/modify_cart_goods",
            count: data.get("count") + 1,
            id: idRef.current,
        });
    }, [dispatch, data]);
    // 点击-号减少商品数量
    const reduceGoods = useCallback(() => {
        dispatch({
            type: "cart/modify_cart_goods",
            count: data.get("count") - 1,
            id: idRef.current,
        });
    }, [dispatch, data]);

    // 修改选中的状态
    const onChangeChecked = (ev) => {
        dispatch({
            type: "cart/modify_cart_goods",
            checked: ev.target.checked,
            id: idRef.current,
        });
    };
    const tipAction = () => {
        Modal.alert("至少一件起售");
    };

    const valueChange = useCallback(
        (value) => {
            value=parseInt(value)
            dispatch({
                type: "cart/modify_cart_goods",
                count: value,
                id: idRef.current,
            });
        },
        [dispatch]
    );
    const toggleHandleModal = useCallback(() => {
        console.log(111);
        setShow((show) => !show);
      }, []);
    return (
        <>
            {show && (
                <ChangeValue
                    value={data.get("count")}
                    onChange={valueChange}
                    onClose={toggleHandleModal}
                />
            )}
            <div className="cart-item">
                <div className="item">
                    <div className="select">
                        <input
                            type="checkbox"
                            checked={data.get("checked") || false}
                            onChange={onChangeChecked}
                        />
                    </div>
                    <div className="img">
                        <img src={data.get("goodsImg")} alt="" />
                    </div>
                    <div className="info">
                        <h3 className="title">{data.get("goodsName")}</h3>
                        <ul className="selected-list">
                            {data.get("selected").map((item) => (
                                <li
                                    className="selected-item"
                                    key={item.get("id")}
                                >
                                    {item.get("value")}
                                </li>
                            ))}
                            <li className="iconfont icon-below-s"></li>
                        </ul>
                        <div className="price">
                            <span>¥{data.get("retailPrice")}</span>
                            <span>¥{data.get("counterPrice")}</span>
                        </div>
                        <div className="handle">
                            {data.get("count") <= 1 ? (
                                <span className="disabled" onClick={tipAction}>
                                    -
                                </span>
                            ) : (
                                <span onClick={reduceGoods}>-</span>
                            )}
                            <span onClick={toggleHandleModal}>{data.get("count")}</span>
                            <span onClick={addGoods}>+</span>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
